import React, { useEffect } from 'react';
import AxCardList from '@/components/AxCardList';
import router from 'umi/router';
import { axhelper } from '@/shared/axhelper';
import { AxButton, AxCard } from '@/components/AxBase';
import { Col, Row, Form } from 'antd';
import { AxCreateFormPage } from '@/components/AxForm/AxCreateForm';
import { AxInput, AxLabel } from '@/components/AxForm/AxFormItem';

const Index: React.FC<any> = props => {
  const { form } = props;
  useEffect(() => {
    axhelper.getPermission();
  }, []);

  const title = {
    desc:
      '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
    links: [
      {
        text: '快速开始',
        src: 'https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg',
      },
      {
        text: '产品简介',
        src: 'https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg',
      },
      {
        text: '产品文档',
        src: 'https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg',
      },
    ],
    extra: {
      src: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
    },
  };

  const data = [
    {
      id: 1,
      icon: 'unordered-list',
      title: '学费列表',
      desc: '学费收费学费收费学费收费学费收费学费收费',
      click: () => router.push({ pathname: '/charge/s/tuition/fee/collect/list' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '学费收费',
      desc: '学费收费学费收费学费收费学费收费学费收费',
      click: () => router.push({ pathname: '/charge/s/tuition/fee/collect/create' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '学费收费',
      desc: '学费收费学费收费学费收费学费收费学费收费',
      click: () => router.push({ pathname: '/charge/s/tuition/fee/collect/create' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '学费收费',
      desc: '学费收费学费收费学费收费学费收费学费收费',
      click: () => router.push({ pathname: '/charge/s/tuition/fee/collect/create' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '学费收费',
      desc: '学费收费学费收费学费收费学费收费学费收费',
      click: () => router.push({ pathname: '/charge/s/tuition/fee/collect/create' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '学费收费',
      desc: '学费收费学费收费学费收费学费收费学费收费',
      click: () => router.push({ pathname: '/charge/s/tuition/fee/collect/create' }),
    },
    {
      id: 3,
      icon: 'import',
      title: '导入学费',
      desc: '导入学费导入学费导入学费导入学费导入学费',
      click: () => router.push({ pathname: '/charge/s/tuition/fee/collect/import' }),
      actions: [
        {
          text: '下载导入模板',
          click: () => router.push({ pathname: '/charge/s/tuition/fee/collect/list' }),
        },
      ],
      // }, {
      //   id: 4,
      //   icon: 'export',
      //   title: '导出学费',
      //   desc: '导出学费导出学费导出学费导出学费导出学费'
    },
  ];

  return (
    <>
      <Row>
        <Col span={4}>
          <AxCard>
            <AxCreateFormPage
              onBack={false}
              title={<span style={{ fontSize: 16, fontWeight: 'normal' }}>项目经费信息</span>}
              form={form}
              footer={<></>}
              items={[
                <AxLabel form={form} label="文件" field="attachmentIds" value="信息1" />,
                <AxLabel form={form} label="文件" field="attachmentIds" value="信息1" />,
                <AxLabel form={form} label="文件" field="attachmentIds" value="信息1" />,
              ]}
            />
          </AxCard>
        </Col>
        <Col span={14}>
          <AxCard style={{ borderLeft: '1px solid rgb(232, 232, 232)' }} bodyStyle={{ padding: 0 }}>
            <AxCard style={{ border: 0 }}>
              <>
                <span style={{ fontSize: 16, fontWeight: 'normal' }}>项目经费使用人</span>
                <span style={{ marginLeft: 12, fontSize: 16 }}></span>
              </>
            </AxCard>
            <AxCard style={{ border: 0 }}>
              <AxCardList
                showAction={false}
                withPageHeaderWrapper={false}
                title={title}
                data={data}
              />
            </AxCard>
          </AxCard>
        </Col>
        <Col span={6}>
          <AxCard style={{ borderLeft: '1px solid rgb(232, 232, 232)' }}>
            <AxCreateFormPage
              onBack={false}
              form={form}
              title={<span style={{ fontSize: 16, fontWeight: 'normal' }}>添加使用人</span>}
              items={[
                <AxInput form={form} label="文件" field="attachmentIds" required />,
                <AxInput form={form} label="文件" field="attachmentIds" required />,
                <AxInput form={form} label="文件" field="attachmentIds" required />,
              ]}
            />
          </AxCard>
        </Col>
      </Row>
    </>
  );
};

export default Form.create<any>()(Index);
